// JSX插值表达式
/* 
  基本数据类型：number string boolean undefined unll
  复杂数据类型：array object function
  其他：JSX本身，三元，逻辑运算符
*/

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

const number = 100;
const string = '悟空';

const arr = [1, 2, 3, 4, 5];
const arr2 = [<div>马化腾</div>, <div>刘强东</div>, <div>王健林</div>];
const person = {
  name: '马云',
  age: 18,
};

const divNode = (
  <div>
    {/* React行内样式是：{{}} */}
    {/* React当中插值表达式写法：{} */}
    <h3>{number}</h3>
    <h3>{999}</h3>
    <h3>{string}</h3>
    {/* boolean undefined unll 页面上是不能显示的 */}
    <h3>{true}</h3>
    <h3>{undefined}</h3>
    <h3>{null}</h3>

    {/* boolean undefined unll需要通过转成字符串才可以显示 */}
    <h3>{String(true)}</h3>
    <h3>{String(undefined)}</h3>
    <h3>{String(null)}</h3>

    {/* 数组和对象类型 */}
    <h3>{arr}</h3>
    <h3>{arr2}</h3>
    {/* 不支持整个对象 */}
    {/* <h3>{person}</h3> */}
    {/* 正确写法-支持 */}
    <h3>{person.name}</h3>
    <h3>{JSON.stringify(person)}</h3>
  </div>
);

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(divNode);

